<!DOCTYPE HTML>
<html>
<head>
<title>Take a break</title>
<script type="text/javascript" src="Scripts_oo/Break.js"></script>
<script type="text/javascript" src="Scripts_oo/Synchronizer.js"></script>
<script type="text/javascript" src="Scripts_oo/Notification.js"></script>
<script type="text/javascript" src="Scripts_oo/Utilities.js"></script>
<script type="text/javascript" src="Scripts_oo/Settings.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../Scripts_oo/UtilScripts/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../CSS/notificationWindow.css" />
</head>
<body>

	<div style="background-color:black; height:30px; padding-top: 0px;">
		<div id="options" style="background-color:byellow; cursor: pointer; height:30px; float:right">
			<div style="float:left;">
				<span style="width:1px; background-color:bred; border: 1px solid black; padding: 2px 1px 2px 1px;"></span>
			</div>
			<div id="time-options" style="float:right; background-color:bpink; width: 30px;">
				<img style="width: 30px; height: 30px;" src="../Resources/muteButton.jpg" id="enableDisableSounds____" alt="Mute"></img>
			</div>
		</div>
	</div>
	
	<div style="position: absolute; right: 0px; top: 30px;">
		<div id="options-pane" style="background-color: white; visibility:visible; height:auto; width:500px;left:auto; right:0px; float:right; border: 1px solid gray;">
			<div class="text" id="micro-options-pane" style="float:left;width:49%; background-color:bred;">
				<ol style="padding-left:10px; padding-right: 10px; text-align:left; list-style-type: none; background-color:bviolet;">
					<li class="text_underlined" style="background-color:byellow; height:25px;">
						Micro
					</li>
					<li style="padding-bottom: 15px; background-color:bgreen; height:auto; vertical-align:middle;">
						<div>
							<div id="micro-duration-header" style="float:left;">
								Duration
							</div> 
							<div style="float:right;">
								<input id="micro-duration-range" style="vertical-align:middle;" spanID="micro-duration-value" type="range" min="5" max="120" value="20" step="5"></input>
							</div>
						</div>
						<div class="text_smaller" style="clear: both; text-align:right; background-color:bblue; padding-right: 10px" id="micro-duration-value">20</div>
					<li style="background-color:bmagenta; height:auto; vertical-align:middle;">
						<div>
							<div id="micro-frequency-header" style="float:left;">
								Frequency
							</div> 
							<div style="float:right;">
								<input id="micro-frequency-range" style="vertical-align:middle;" spanID="micro-frequency-value" type="range" min="300" max="1200" value="600" step="30"></input>
							</div>
						</div>
						<div class="text_smaller" style="clear: both; text-align:right; background-color:bblue; padding-right: 10px" id="micro-frequency-value">10</div>
					</li>
				</ol>
			</div>

			<div style="padding-top: 10px; padding-bottom: 10px; float: left;">
				<div class="verticalSeparator" style="height: 100px;"></div>
			</div>
						
			<div class="text" id="micro-options-pane" style="float:right; width:49%; background-color:bgreen;">
				<ol style="padding-left:10px; padding-right: 10px; text-align:left; list-style-type: none;">
					<li class="text_underlined" style="background-color:byellow; height:25px;">
						Macro
					</li>
					<li style="padding-bottom: 15px; background-color:bgreen; height:auto; vertical-align:middle;">
						<div>
							<div id="macro-duration-header" style="float:left;">
								Duration
							</div> 
							<div style="float:right;">
								<input id="macro-duration-range" style="vertical-align:middle; color: blue;" spanID="macro_duration-value" type="range" min="180" max="600" value="300" step="30"></input>
							</div>
						</div>
						<div class="text_smaller" style="clear: both; text-align:right; background-color:bblue; padding-right: 10px" id="macro_duration-value">300</div>
					<li style="background-color:bmagenta; height:auto; vertical-align:middle;">
						<div>
							<div id="macro-frequency-header" style="float:left;">
								Frequency
							</div> 
							<div style="float:right;">
								<input id="macro-frequency-range" style="vertical-align:middle;" spanID="macro-frequency-value" type="range" min="1200" max="7200" value="3600" step="60"></input> 
							</div>
						</div>
						<div class="text_smaller" style="clear: both; text-align:right; background-color:bblue; padding-right: 10px" id="macro-frequency-value">60</div>
					</li>
				</ol>
			</div>
			
			<div style="background-color: blue;">
				<img class="audioSettingsButton_noPadding" src="../Resources/muteButton.jpg" id="enableDisableSounds_Setting" alt="Mute"></img>
			</div>
		</div>
	</div>
	<script>
	$('#time-options')[0].addEventListener('click', function(e){
		var event = e || window.event;
		
		if($('#options-pane')[0].style.visibility == "hidden")
			$('#options-pane')[0].style.visibility = "visible";
		else
			$('#options-pane')[0].style.visibility = "hidden";
		
		if (event.stopPropagation) {
		    event.stopPropagation();
		  } else {
		    event.cancelBubble = true;
		  }
		}, false);
	$('#options-pane')[0].addEventListener('click', function(e) {
		var event = e || window.event;
		
		if (event.stopPropagation) {
		    event.stopPropagation();
		  } else {
		    event.cancelBubble = true;
		  }
	}, false);
	document.addEventListener('click', function(){$('#options-pane')[0].style.visibility = "hidden";},false);
	</script>
	
	<br /><br /><br />
	<label id="desktopNotificationRequestBanner" class="banner text textLarge">
		<a id="enableNotifications" href="#">Click here to enable</a> desktop notifications for this application.
		<a target=_blank href="http://www.browser-watch.com/2010/05/29/desktop-notifications-now-available-for-chrome/">Learn More</a>
	</label>
	
	<div>	
		<img src="/Resources/homeBanner.JPG">
		</img>
	</div>
	
	<br /><br />
	<div id="timerContainerLevel1">
		<div id="timerContainerLevel2">
			<div id="nextBreakTimeDisplay" class="timerDisplay"></div>
		</div>
	</div>
	<br />
	
	<br /><br />
		<div id="nextBreakTimeDisplay" class="counter"></div>
	<br />
	
	<br /><br />
	<button class="orange button" id="pauseResumeBreak" type="button">Pause Breaks</button>
</body>
</html>

